<template>
  <div>
    <p>
        用户名：
        <input type="text" v-model,lazy="name">
    </p>
    <p>{{tip}}</p>
  </div>
</template>

<script>
import { setup,ref,watch } from "vue"
export default {
  setup(){
    const name=ref("");
    const tip=ref("");
    watch(name,(newValue,oldValue)=>{
        console.log(`旧值是：${oldValue},新值是：${newValue}`);
        setTimeout(function(){
          if(newValue=="admin"){
            tip.value="用户名已经存在，请更换一个";
          }else{
            tip.value="用户名可以使用";
          }
        },1000);
    });
    return{
        name,
        tip
    };
  }
}
</script>
